.settings-body {
    padding: 20px;
    overflow: auto;
    label, .toggle-label {
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: normal !important;
    }
    .form-group {
        margin-bottom: 30px;
    }
    input[type="text"], input[type="password"] {
        border: $solid-line;
    }
}

.error-message {
    background-color: $failure-color;
    color: lighten($failure-color, 40%)
}

.small-grey-text {
    font-size: 10px;
    color: darken($line-color, 40%)
}

.proxima-nova-14 {
    text-transform: none;
    font-family: ProximaNova;
    font-size: 14px;
}

.circle-dark {
    .sk-child:before {
        background-color: black !important;
    }
}

.login-panel {
    @extend .ulterius-panel;
    flex-wrap: wrap;
    .ulterius-banner {
        background-color: $sidebar-header-bg;
        color: white;
        text-align: center;
        padding: 20px;
        font-family: ProximaNovaCondSemi;
        font-size: 17px;
        text-transform: uppercase;
        img, .sk-circle {
            width: 40px;
            height: 45px;
            display: inline-block;
            margin-bottom: 10px;
            margin-top: 0 !important;
        }
    }
    .login-message {
        padding: 10px 20px;
    }
    .login-portrait {
        text-align: center;
        line-height: 30px;
        padding: {
            top: 20px;
        }
    }
    .login-body {
        @extend .settings-body;
        .form-group {
            margin-bottom: 0;
        }
        display: flex;
        .hostname {
            flex: 3;
            margin-right: 10px;
        }
        .port {
            flex: 1;
        }
    }
    .login-foot {
        padding: 0 20px 20px 20px;
    }
}

.toggle-switch {
    cursor: pointer;
    justify-content: flex-start;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    width: 90px;
    height: 40px;
    box-shadow: $hole-shadow;
    background-color: $bg;
    border: $solid-line;
    .inner {
        div {
            line-height: 0;
        }
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: {
            right: 5px;
            left: 5px;
        }
        background-color: white;
        color: $text-color;
    }
    &.on {
        justify-content: flex-end;
        .inner {
            color: $highlight;
        }
    }
}

.center-parent {
    display: flex;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.center-parent-no-height {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.center-child {
    text-align: center;
}

.hover-container .unhovered {
    display: inline;
}

.hover-container .hover {
    display: none;
}

.hover-container:hover .hover, .hover-container:active .hover {
    display: inline
}

.hover-container:hover .unhovered, .hover-container:active .unhovered {
    display: none;
}

.highlighted {
    color: $highlight;
}

.tab-panel {
    height: 100%;
    min-height: min-content;
    display: flex;
    flex-direction: column;
}

.tab-bar {
    display: flex;
    align-items: bottom;
    flex: none;
}

.tab-bar-tab {
    padding: 5px 13px;
    background-color: $stat-bg;
    border: solid 1px $line-color;
    border-bottom: none;
    cursor: pointer;
    @include h-margin-collapse(2px);
    &-active, &:hover {
        background-color: $terminal-bg;
        color: white;
        border: solid 1px $terminal-bg;
        border-bottom: none;
    }
    .close-icon {
        font-size: 12px;
        display: inline-block;
        margin-bottom: -2px;
    }
}

.new-terminal {
    @extend .bare-input-button;
    width: 300px;
    button, button:hover {
        color: white;
    }
    .input-group {
        border-bottom: $dashed-line;
    }
    input[type="text"], input[type="password"] {
        color: white;
    }
}

.terminal-basic {
    background-color: $terminal-bg;
    padding: 10px;
    height: 100%;
    color: white;
    flex: 1;
}

.pseudo-terminal {
    @extend .terminal-basic;
}

.terminal {
    @extend .terminal-basic;
    font-family: Menlo, Monaco, Consolas, monospace, sans-serif !important;
    height: 100%;
    line-height: 10px;
    overflow-y: auto;
    font-size: 14px;
    pre {
        white-space: pre-wrap;
        word-break: normal;
    }
    .input-line {
        border: none;
        background-color: $terminal-bg;
        color: white;
        font-family: Menlo, Monaco, Consolas, Monospace;
        outline: none;
    }
}

.debug-page {
    display: flex;
    flex-direction: column;
}

.debug-objects {
    flex: 1;
    overflow-y: auto;
    padding-top: 10px;
}

.debug-entry {
    @extend .bare-input-button;
    box-shadow: $panel-shadow;
    background-color: white;
    border: $solid-line;
    input[type="text"] {
        font-family: Menlo, Monaco, Consolas, Monospace;
    }
    flex: none;
    margin-bottom: 20px;
}

input::-webkit-calendar-picker-indicator {
    background-color: none !important;
}

.modal-body img {
    max-width: 100%;
}